<template>
  <div>
    <div style="width: 600px;margin:0 auto;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);">
      <div style="display: flex;flex-direction: column">
        <div>
          <div class="block">
            <el-avatar :size="100" :src="circleUrl"></el-avatar>
          </div>
        </div>
        <div class="di">
          <span>用户账号</span>
          <el-input v-model="username" aria-placeholder="用户名" style="width: 150px" @blur="cleanImgPath">{{
              username
            }}
          </el-input>
        </div>
        <div class="di">
          <span>用户密码</span>
          <el-input v-model="password" type="password" aria-placeholder="密码" @blur="getUserInfo" style="width: 150px">{{
              password
            }}
          </el-input>
        </div>
        <div class="di">
          <el-button type="success" @click="userLogin">登录</el-button>
          <el-button type="success" @click="userRegister">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      circleUrl: ''
    }
  },
  methods: {
    userLogin() {
      let url = "userApi/user/findUserByPwd/" + this.username + "/" + this.password;
      this.axios.get(url).then(
          result => {
            console.log("数据为" + result.data)
            if (result.data == null || result.data == '') {
              alert("登陆失败，用户名或密码不正确")
            } else {
              //成功则跳转界面
              this.$router.push("Index")
            }
          }
      )
    },
    userRegister() {
      this.$router.push("Register")
    },
    cleanImgPath() {
      this.circleUrl = ''
    },
    getUserInfo() {

      this.cleanImgPath();
      let url = "userApi/user/findUserByPwd/" + this.username + "/" + this.password;
      this.axios.get(url).then(
          result => {
            if (result.data != "") {
              this.circleUrl = "userApi/img/" + result.data.imgPath
            }
          }
      )
    }
  }


}
</script>

<style scoped>
span {
  margin: 20px;
}

.di {
  margin: 20px;
}
</style>